<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">音乐列表</div>
        <div class="layui-card-body">
            <table id="musiclist" lay-filter="musicFilter"></table>
        </div>
    </div>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //获取模块对象
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;
           
        //表格数据渲染
        table.render({
            elem:'#musiclist',
            url:'http://127.0.0.1/music/list',
            page:true,
            toolbar:'#toolbar', //显示头工具栏
            cols:[[
                {type:'checkbox'},
                {title:'序号',type:'numbers'},
                {title:'封面',templet:'<div><img src="{{d.ablumImg}}" height="50px"></div>'},
                {title:'歌曲名',field:'name'},
                {title:'流派',field:'style'},
                // {title:'专辑名',field:'ablumName'},
                {title:'发行时间',field:'releasetime'},
                // {title:'文件大小',templet:'<div>{{(d.size/(1024*1024)).toFixed(1)}}MB</div>'},
                {title:'时长',templet:function(d){
                    if(!d.duration){
                        return '未知'
                    }
                    //根据毫秒单位时间获取日期对象
                    let date = new Date(d.duration)
                    //获取分和秒
                    let m = date.getMinutes()
                    let s = date.getSeconds()
                    return `${m}分${s}秒`
                }},
                {title:'歌手',field:'singerName'},
                {title:'试听',width:200,templet:'<div><audio src="{{d.url}}" controls style="height:30px;width:180px"></div>'},
                {title:'操作',templet:'#rowTools',width:300}
            ]]
        })

        //为表格绑定头工具事件
        table.on('toolbar(musicFilter)',function(obj){
            //获取事件名(lay-event属性)
            let e = obj.event
            if(e === 'search'){
                //获取查询关键字并判断
                let key = $('#keyword').val()
                if(!key){
                    layer.msg('请输入歌曲名称关键字')
                    return
                }
                //执行查询请求(重载表格数据)
                table.reloadData('musiclist',{
                    url: 'http://127.0.0.1/music/query',  //服务端接口地址
                    where: {            //提交请求参数
                        key: key
                    }
                })
            }else if(e === 'reload'){
                //重载表格
                table.reload('musiclist',{
                    url:'http://127.0.0.1/music/list'
                })
            }
        })

        //为表格绑定单元格事件
        table.on('tool(musicFilter)',function(obj){
            //获取单元格按钮的lay-event属性值
            let e = obj.event
            switch(e){
                case 'addlist':
                    layer.open({
                                type: 1,
                                offset: 'r',
                                title:'请选择需要加入的歌单',
                                anim: 'slideLeft', // 从右往左
                                area: ['320px', '100%'],
                                shade: 0.1,
                                shadeClose: true,
                                id: 'dialogList',
                                content: '<div style="padding: 16px;" class="layui-btn-container"></div>',
                                success:function(layero,index,that){
                                    //发送请求查询所有的歌单
                                    $.get('http://127.0.0.1/musiclist/listAll',function(resp){
                                        //获取歌单列表
                                        let list = resp.data
                                        //循环遍历每一条歌单对象
                                        $.each(list,(i,e)=>{
                                            //创建一个按钮对象
                                            let btn = $(`<button class="layui-btn layui-bg-blue layui-btn-fluid">${e.name}</button>`)
                                            //将按钮加入指定位置
                                            layero.find('#dialogList>.layui-btn-container').append(btn)
                                            //为按钮绑定事件
                                            btn.on('click',function(){
                                                //获取歌曲id
                                                let mid = obj.data.id
                                                //获取歌单id
                                                let listId = e.id
                                                let data = {
                                                    mid:mid,
                                                    listId:listId
                                                }
                                                //请求后台接口实现歌单添加
                                                $.post('http://127.0.0.1/listdetails/add',data,function(resp){
                                                    if(resp.code === 0){
                                                        layer.msg(resp.msg,function(){
                                                            layer.closeAll()
                                                        })
                                                    }else{
                                                        layer.alert(resp.msg,{icon:0})
                                                    }
                                                })
                                            })
                                        })  
                                    })    
                                }
                            });
                    break
                case 'details':
                    layer.msg('歌曲详情查看,功能待完成')
                    break
                case 'edit':
                    layer.msg('歌曲修改,功能待完成')
                    break
                case 'del':
                    layer.msg('歌曲删除,功能待完成')
                    break;            
            }
        })
    })
</script>
<!--自定义头工具栏-->
<script id="toolbar" type="text/html">
    <div class="layui-inline">
        <button class="layui-btn layui-btn-danger" lay-event="dels">
            <i class="layui-icon layui-icon-delete"></i>
            批量删除
        </button>
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" class="layui-input" id="keyword" placeholder="请输入查询关键字">
        </div>
        <button class="layui-btn layui-btn-normal" lay-event="search">
            <i class="layui-icon layui-icon-search"></i>
            搜索
        </button>
        <button class="layui-btn layui-bg-green" lay-event="reload">
            <i class="layui-icon layui-icon-refresh"></i>
            重新加载
        </button>
    </div>
</script>
<!--自定义行工具栏-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="addlist">
            <i class="layui-icon layui-icon-add-1"></i>
            加入歌单
        </button>
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-about"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            编辑
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>

<!--试听按钮的页面模板-->
<script id="preview" type="text/html">
    <button class="layui-btn layui-btn-normal layui-btn-xs preview-btn" lay-event="playOrPause" data-playing="0"
            data-src="{{d.path}}">
        <i class="layui-icon layui-icon-play"></i>
    </button>
</script>


<!--歌曲详情弹层-->
<div id="music-details-dialog" style="display: none;padding: 20px">
    <table class="layui-table" lay-even>
        <tr>
            <td rowspan="3"><img src="" class="coverImg" width="100px" alt=""></td>
            <td>歌曲名:</td>
            <td id="musicName">xxx</td>
            <td>专辑:</td>
            <td id="ablumName">xxxx</td>
            <td>歌手：</td>
            <td id="singerName">xxxx</td>
        </tr>
        <tr>
            <td class="layui-elip">发行公司：</td>
            <td id="company" class="layui-elip">xxxx</td>
            <td class="layui-elip">发行时间</td>
            <td id="releaseTime" class="layui-elip">xxxx</td>
            <td>歌曲风格</td>
            <td id="style">xxxx</td>
        </tr>
        <tr>
            <td>文件大小</td>
            <td id="size">xxx</td>
            <td>试听</td>
            <td colspan="3">
                <audio src="" class="shiting" controls></audio>
            </td>
        </tr>
        <tr>
            <td colspan="7" id="lrc">歌词</td>
        </tr>
    </table>
</div>

<!--歌曲编辑弹层-->
<div id="music-edit-dialog" style="display: none;padding: 20px">
    <form class="layui-form" id="musicInfo" lay-filter="music-info">
        <input type="hidden" name="id">
        <table class="layui-table" lay-even>
            <tr>
                <td rowspan="3"><img src="" class="coverImg" width="100px" alt=""></td>
                <td>歌曲名:</td>
                <td><input type="text" name="name" class="layui-input"></td>
                <td>专辑:</td>
                <td>
                    <select name="aid" id="aid" lay-filter="select-filter">
                        <option value="0">匿名</option>
                    </select>
                </td>
                <td>歌手：</td>
                <td><input type="text" name="sname" class="layui-input"></td>
            </tr>
            <tr>
                <td>发行公司：</td>
                <td><input type="text" class="layui-input" name="company" readonly></td>
                <td>发行时间</td>
                <td><input type="text" class="layui-input" name="releasedate" readonly></td>
                <td>歌曲风格</td>
                <td>
                    <select name="style">
                        <option value="流行">流行</option>
                        <option value="摇滚">摇滚</option>
                        <option value="民谣">民谣</option>
                        <option value="电子">电子</option>
                        <option value="轻音乐">轻音乐</option>
                        <option value="爵士">爵士</option>
                        <option value="R&B">R&B</option>
                        <option value="乡村">乡村</option>
                        <option value="中国风">中国风</option>
                        <option value="说唱">说唱</option>
                        <option value="古典">古典</option>
                        <option value="世界音乐">世界音乐</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>文件大小</td>
                <td><input type="text" class="layui-input" name="size" readonly></td>
                <td>持续时长</td>
                <td><input type="text" class="layui-input" name="duration" readonly></td>
                <td>试听</td>
                <td>
                    <audio src="" class="shiting" controls></audio>
                </td>
            </tr>
            <tr>
                <td colspan="7">
                    <textarea class="layui-textarea" name="lrc"></textarea>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>